<template>
	<view class="home-container">
		<view>
			<u-search placeholder="请输入你想搜索的内容" v-model="keyword" :show-action="false" @search="getBooksBySearch"
				search-icon-color="rgb(146,209,79)" border-color="rgb(146,209,79)"></u-search>
		</view>
		<view class="home-list">
			<view v-for="(item, index) in bookTypeList" :key="item.id"
				@click="toBookList(item.id, item.classification_name)" class="home-item">
				<view class="title">{{item.classification_name}}</view>
				<view class="item-img">
					<image :src="baseUrl + item.classification_img" mode="" />
				</view>
				<view class="item-bg">
					<image src="../static/img-new/book.png" mode="" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			this.baseUrl = "http://cartoon-books-admin.v2.ascetic.top/storage/";
			return {
				keyword: "",
				bookTypeList: null,
			};
		},
		onShow() {
			this.getAllBooks();
		},
		methods: {
			toBookList(id, title) {
				uni.navigateTo({
					url: "/pages/bookList?id=" + id + "&title=" + title,
				});
			},
			getAllBooks() {
				this.$u.post("books_classification").then((res) => {
					this.bookTypeList = res.data;
					console.log(res);
				});
			},
			getBooksBySearch() {
				let o = {};
				o.classification_name = this.keyword;
				this.$u.post("books_classification", o).then((res) => {
					this.bookTypeList = res.data;
				});
			},
		},
	};
</script>

<style scoped>
	.title{
		width: 100%;
		height: auto;
		display: table;
		font-size: 15px;
		color: #fff;
		line-height: 50px;
		position: absolute;
		bottom: 3px;
		left: 0px;
		box-sizing: border-box;
		z-index: 200;
		padding: 10px 30px;  
		text-align: center;  
	}
	page {
		background-color: rgb(253, 253, 240);
	}

	.home-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-content: center;
		padding: 40rpx;
	}

	.home-list {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.home-item {
		width: 49%;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		position: relative;
	}

	.item-bg {
		width: 264rpx;
		height: 324rpx;
	}

	.item-bg image {
		width: 264rpx;
		height: 324rpx;
	}

	.item-img {
		position: absolute;
		top: 92rpx;
		left: 64rpx;
		z-index: 100;
		width: 220rpx;
		height: 220rpx;
	}

	.item-img image {
		width: 220rpx;
		height: 220rpx;
	}
</style>
